<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.box {
				background: url(images/5.png)left center no-repeat;
				background-size: 100% 100%;
			}
			
			.y_head {
				width: 100%;
				background-color: #EFEFEF;
			}
			
			.y_header {
				width: 1100px;
				margin: auto;
				padding: 10px 0 10px;
			}
			
			.y_cont_logo {
				width: 200px;
				height: 70px;
				float: left;
				margin-left: 20px;
			}
			
			.y_cont_logo img {
				width: 200px;
				height: 70px;
			}
			
			.y_login_user {
				width: 100px;
				float: right;
				margin-right: 20px;
				position: relative;
			}
			
			.y_login_user img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				padding: 10px;
				display: block;
				margin: auto;
			}
			
			.y_user_detail {
				width: 200px;
				background: #FFF;
				border: solid 1px #CCCCCC;
				position: absolute;
				left: -40px;
				top: 80px;
				display: none;
				z-index: 1;
			}
			.y_user_detail p,
			.y_user_detail li {
				font-size: 16px;
				line-height: 46px;
				text-align: center;
			}
			.y_user_detail p a,
			.y_user_detail li a {
				text-decoration: none;
				color: #000;
			}
			
			.y_read_content {
				width: 1100px;
				min-height: 800px;
				margin: auto;
			}
			
			.y_read_content h3 {
				font-size: 30px;
				text-align: center;
				line-height: 100px;
			}
			.y_read_content div{
				font-size: 18px;
				line-height: 70px;
			}
			.y_login_bottom {
				width: 100%;
				padding-bottom: 30px;
				padding-top: 100px;
			}
			
			.y_login_bottom p {
				font-size: 16px;
				line-height: 50px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="y_head">
				<div class="y_header clearfix">
					<div class="y_cont_logo">
						<img src="images/2.png" />
					</div>
					<div class="y_login_user">
						<img src="" />
						<ul class="y_user_detail">
							<p>
								<a href="">立即登录</a>
							</p>
							<li>
								<a href="">用户名</a>
							</li>
							<li>
								<a href="">我的书架</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">个人中心</a>
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="y_read_content">
				<!--<h3>第几章</h3>
				<div>收款方，客户山东干还是狗肉了还独生女个，毒奶粉为各类你啥课刀锋女王看宾馆的 </div>-->
			</div>
			<div class="y_login_bottom">
				<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
				<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
				<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//判断有没有登录
		if(!localStorage.user) {
			$('.y_user_detail p').css({
				display: 'block'
			})
			$('.y_user_detail li').css({
				display: 'none'
			})
		} else {
			$('.y_user_detail p').css({
				display: 'none'
			})
			$('.y_user_detail li').css({
				display: 'block'
			})
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
		}
		//登录注册
		$('.y_login_user').on('mouseover', function() {
			$('.y_user_detail').show()
		})
		$('.y_login_user').on('mouseout', function() {
			$('.y_user_detail').hide()
		})
		var href = 'http://localhost:8000'
		//头像
		$('.y_login_user img').attr('src', localStorage.img)
		$('.y_login_user li').eq(0).html(localStorage.name)
		
		//小说阅读
		var struid=location.href.split('?')[1].split('&')[0].split('=')[1]
		var strbook=location.href.split('?')[1].split('&')[1].split('=')[1]
		console.log()
		$.ajax({
			type:"post",
			url:href+"/users/read",
			data:{
				uid:struid,
				booklist:decodeURI(strbook)
			},
			success(data){
				console.log(data)
				var h3=$('<h3>').html(data[0].booklist)
				var oDiv=$('<div>').html(data[0].text)
				$('.y_read_content').append(h3)
				$('.y_read_content').append(oDiv)
			}
		});
		//我的书架
		$('.y_login_user li').eq(1).on('click', function() {
			$(this).children().attr('href', href + '/books.html')
		}) 
		//退出登录
		$('.y_login_user li').eq(4).on('click', function() {
			$('.y_login_user li').eq(0).html('用户名:')
			$('.y_login_user img').attr('src', 'images/1.png')
			localStorage.clear('user')
			localStorage.clear('uid')
			localStorage.clear('img')
			localStorage.clear('name')
			$(this).children('a').attr('href',href)
		}) 
		//个人收藏
		$('.y_login_user li').eq(2).on('click', function() {
			$(this).children().attr('href', href + '/collect.html')
		}) 
		//个人中心
		$('.y_login_user li').eq(3).on('click', function() {
			$(this).children('a').attr('href',href+'/detials.html')
		})
	</script>

</html>